var app = new Vue({
	el: '#app',
	data: {
		panel: 'medicine',
		menu:'medicine',
		isLogin: false,
		account: '',
		password: '',
		accountName: '',
		type: 'clerk',
		oldPassword: '',
		newPassword: '',
		searchMedicineName:'',
		viewBillMsg: {},
		viewMedicineMsg: {},
		medicine: [],
		medicineShow: [],
		clerk: [],
		medicinePage: 1,
		billShow: null,
		billPage: 1,
		bill: null,
		editId: null,
		editImg: "/img/default-pill.jpg",
		editName: null,
		editPrice: '',
		editIntroduce: '',
		editAble: '1',
		editClerkMsg: {
			name: null,
			account: null,
			department: null,
			password: null,
			able: null
		},
		addClerkMsg: {
			name: null,
			account: null,
			department: null,
			password: null,
			type: null
		},
		addMedicineMsg: {
			name: null,
			price: null,
			introduce: null,
			imgurl: null
		},
		containDeleteMedicine: false,
		containDeleteClerk: false
	},
	watch: {
		medicinePage: function(){
			this.renderMedicine();
		},
		billPage: function(){
			this.renderBill();
		},
		containDeleteMedicine: function(){
			this.getMedicine();
		},
		containDeleteClerk: function(){
			this.getClerk();
		}
	},
	methods: {
		getLoginStatus: function(){
			var self = this;
			$.get('/api/isLogin',function(data,status){
				if (data.success == "ok") {
					self.isLogin = true;
					self.accountName = data.result.account;
				} else {
					self.isLogin = false;
					self.accountName = "";
					window.location.href = "/login.html"
				}
			})
		},
		login: function(){
			var self = this;
			$.post("/api/login",
			{
				account: this.account,
				password: this.password,
				type: this.type
			},
			function(data,status){
				if (data.success == "ok") {
					self.getLoginStatus();
				}
			});
		},
		logout: function(){
			var self = this;
			$.post("/api/logout",{},function(data,status){
				if (data.success = "ok") {
					self.getLoginStatus();
				}
			});
		},
		changePassword: function(){
			var self = this;
			$.post("/api/changePassword",
			{
				oldPassword: self.oldPassword,
				newPassword: self.newPassword
			},function(data,status){
				if (data.success == "ok") {
					self.oldPassword = self.newPassword = null;
					$('#passwordModal').modal('hide');
					swal("修改成功", "密码已更新", "success");
				} else {
					swal("修改失败", data.msg, "error");
				}
			});
		},
		changeMenu: function(param){
			this.menu = param;
			this.panel = param;
		},
		getMedicine: function(){
			var self = this;
			var data = {};
			if (this.containDeleteMedicine == false) {
				data.able = 1;
			}
			$.post("/api/viewMedicine",data,function(data, status){
				if (data.success == "ok") {
					self.medicine = data.result.data;
					self.renderMedicine();
				}
			})
		},
		renderMedicine: function(){
			var self = this;
			var page = self.medicinePage;
			self.medicineShow = [];
			for (var i = 0; i < 20 ; i++) {
				if (self.medicine[(page-1)*20+i] != undefined) {
					self.medicineShow.push(self.medicine[(page-1)*20+i]);
				}
			}
		},
		renderBill: function(){
			var self = this;
			var page = self.billPage;
			self.billShow = [];
			for (var i = 0; i < 20 ; i++) {
				if (self.bill[(page-1)*20+i] != undefined) {
					self.billShow.push(self.bill[(page-1)*20+i]);
				}
			}
		},
		getBill: function(){
			var self = this;
			$.post("/api/viewBill",{},function(data, status){
				if (data.success == "ok") {
					self.bill = data.result.data;
					self.renderBill();
				}
			})
		},
		changePage: function(type, page){
			this[type+"Page"] = page;
		},
		logout: function(){
			$.post("/api/logout",{},function(data, status){
				if (data.success == "ok") {
					window.location.href = "/login.html"
				} else {
					alert("退出错误");
				}
			})
		},
		deleteMedicine: function(msg){
			var self = this;
			swal({ 
				title: "确定删除吗？", 
				text: "你将无法恢复该虚拟文件！", 
				type: "warning",
				showCancelButton: true, 
				confirmButtonColor: "#DD6B55",
				confirmButtonText: "确定", 
				cancelButtonText: "取消",
				closeOnConfirm: false
			},function(isConfirm){ 
				if (isConfirm) { 
					$.post("/api/editMedicine",{
						id: msg.id,
						able: 0
					},function(data, status){
						if (data.success == "ok") {
							swal("成功", "所选药品已经被删除。","success"); 
							self.getMedicine();
						} else {
							swal("失败", data.msg, "error"); 
						}
					})
				}
			});
		},
		recoverMedicine: function(msg){
			var self = this;
			swal({ 
				title: "确定恢复吗？", 
				text: "即将恢复"+msg.name+"药品", 
				type: "warning",
				showCancelButton: true, 
				confirmButtonColor: "#DD6B55",
				confirmButtonText: "确定", 
				cancelButtonText: "取消",
				closeOnConfirm: false
			},function(isConfirm){ 
				if (isConfirm) { 
					$.post("/api/editMedicine",{
						id: msg.id,
						able: 1
					},function(data, status){
						if (data.success == "ok") {
							swal("成功", "所选药品已经恢复。","success"); 
							self.getMedicine();
						} else {
							swal("失败", data.msg, "error"); 
						}
					})
				}
			});
		},
		viewMedicine: function(msg){
			console.log(msg)
			this.viewMedicineMsg = msg;
			$('#medicineModal').modal('show')
		},
		viewBill: function(msg){
			console.log(msg);
			this.viewBillMsg = msg;
			$('#billModal').modal('show')
		},
		editMedicine: function(msg){
			console.log(msg);
			this.editImg = msg.imgurl || '/img/default-pill.jpg';
			this.editName = msg.name;
			this.editPrice = msg.price;
			this.editIntroduce = msg.introduce;
			this.editId = msg.id;
			$('#editMedicineModal').modal('show');
		},
		showChangePassword: function(){
			$('#passwordModal').modal('show');
		},
		edit: function(){
			var self = this;
			var id = this.editId;
			var name = this.editName;
			var price = this.editPrice;
			var introduce = this.editIntroduce;
			var imgurl = this.editImg;
			if (id == undefined || id == "") {
				swal("保存失败", "id信息缺失", "error")
			} else if ( name == undefined || name == "") {
				swal("保存失败", "名字缺失", "error")
			} else if ( price == undefined || price == "") {
				swal("保存失败", "价格不能为空", "error")
			} else if ( imgurl == undefined || imgurl == "") {
				swal("保存失败", "图片不能为空", "error")
			} else {
				$.post("/api/editMedicine",{
					id: id,
					name: name,
					price:price,
					introduce:introduce,
					imgurl:imgurl
				},function(data, status){
					if (data.success == "ok") {
						$('#editMedicineModal').modal('hide');
						swal("保存成功", "数据已更改", "success");
						self.getMedicine();
					} else {
						swal("保存失败", data.msg, "error");
					}
				})
			}
		},
		uploadImg: function(){
			var self = this;
			var formData = new FormData($("#uploadForm")[0])
			$.ajax({    
				url: '/api/upload' ,  /*这是处理文件上传的servlet*/  
				type: 'POST',    
				data: formData,    
				async: false,    
				cache: false,    
				contentType: false,    
				processData: false,    
				success: function (result) {    
					/*这是预览图片用的，自己在文件上传表单外添加*/  
					console.log(result);
					self.editImg = result.file_path;
				},    
				error: function (result) {    
					alert(result);    
				}    
			}); 
		},
		uploadImg2: function(){
			var self = this;
			var formData = new FormData($("#uploadForm2")[0])
			$.ajax({    
				url: '/api/upload' ,  /*这是处理文件上传的servlet*/  
				type: 'POST',    
				data: formData,    
				async: false,    
				cache: false,    
				contentType: false,    
				processData: false,    
				success: function (result) {    
					/*这是预览图片用的，自己在文件上传表单外添加*/  
					console.log(result);
					self.addMedicineMsg.imgurl = result.file_path;
				},    
				error: function (result) {    
					alert(result);    
				}    
			}); 
		},
		getClerk: function(){
			var self = this;
			var data = {};
			if (self.containDeleteClerk == true) {
				data.able = 1;
			}
			$.post("/api/viewClerk",data,function(data, status){
				if (data.success == "ok") {
					console.log(data);
					self.clerk = data.result.data;
				}
			})
		},
		editClerk: function(cl){
			this.editClerkMsg.name = cl.name;
			this.editClerkMsg.department = cl.department;
			this.editClerkMsg.account = cl.account;
			this.editClerkMsg.able = cl.able;
			this.editClerkMsg.id = cl.id;
			$('#editClerkModal').modal('show');
		},
		editClerkSave: function(){
			var self = this;
			var name = this.editClerkMsg.name;
			var account = this.editClerkMsg.account;
			var department = this.editClerkMsg.department;
			var able = this.editClerkMsg.able;
			var id = this.editClerkMsg.id;

			var password = this.editClerkMsg.password;

			if (name == undefined || name == "") {
				swal("保存失败", "姓名不能为空", "error")
			} else if ( account == undefined || account == "") {
				swal("保存失败", "账户不能为空", "error")
			} else if ( department == undefined || department == "") {
				swal("保存失败", "部门不能为空", "error")
			} else {

				var data = {
					id:id,
					name: name,
					account: account,
					department: department,
					able: able,
				}

				if (password != null && password != undefined && password != "") {
					data.password = password;
				}

				$.post("/api/editClerk",data,function(data, status){
					if (data.success == "ok") {
						$('#editClerkModal').modal('hide');
						swal("保存成功", "数据已更改", "success");
						self.getClerk();
					} else {
						swal("保存失败", data.msg, "error");
					}
				})
			}
		},
		addClerk: function(){
			$('#addClerkModal').modal('show');
		},
		addClerkSave: function(){
			var self = this;
			var name = this.addClerkMsg.name;
			var account = this.addClerkMsg.account;
			var department = this.addClerkMsg.department || this.addClerkMsg.type;
			var password = this.addClerkMsg.password;
			var type = this.addClerkMsg.type;

			if (name == undefined || name == "") {
				swal("保存失败", "姓名不能为空", "error")
			} else if ( account == undefined || account == "") {
				swal("保存失败", "账户不能为空", "error")
			} else if ( type == undefined || type == "") {
				swal("保存失败", "类型不能为空", "error")
			} else if ( password == undefined || password == "") {
				swal("保存失败", "预设密码不能为空", "error")
			} else {

				var data = {
					name: name,
					account: account,
					department: department,
					password: password,
					type: type
				}

				$.post("/api/addClerk",data,function(data, status){
					if (data.success == "ok") {
						$('#addClerkModal').modal('hide');
						swal("保存成功", "业务员已添加", "success");
						self.getClerk();
					} else {
						swal("保存失败", data.msg, "error");
					}
				})
			}
		},
		addMedicine: function(){
			$('#addMedicineModal').modal('show');
		},
		addMedicineSave: function(){
			var self = this;
			var name = this.addMedicineMsg.name;
			var price = this.addMedicineMsg.price;
			var introduce = this.addMedicineMsg.introduce;
			var imgurl = this.addMedicineMsg.imgurl;

			if (name == undefined || name == "") {
				swal("保存失败", "姓名不能为空", "error")
			} else if ( price == undefined || price == "") {
				swal("保存失败", "价格不能为空", "error")
			} else if ( introduce == undefined || introduce == "") {
				swal("保存失败", "介绍不能为空", "error")
			} else if ( imgurl == undefined || imgurl == "") {
				swal("保存失败", "图片不能为空", "error")
			} else {

				var data = {
					name: name,
					price: price,
					introduce: introduce,
					imgurl: imgurl
				}

				$.post("/api/addMedicine",data,function(data, status){
					if (data.success == "ok") {
						$('#addMedicineModal').modal('hide');
						swal("保存成功", "药品已添加", "success");
						self.getMedicine();
					} else {
						swal("保存失败", data.msg, "error");
					}
				})
			}
		},
		searchMedicine: function(){
			var self = this;
			$.post("/api/viewMedicine",{
				name: self.searchMedicineName
			},function(data, status){
				if (data.success == "ok") {
					self.medicine = data.result.data;
					self.renderMedicine();
				}
			})
		}
	},
	mounted: function(){
		this.getLoginStatus();
		this.getMedicine();
		this.getBill();
		this.getClerk();
		var self = this;
		$("#inputFile").change(function(){
			self.uploadImg();
		})
		$("#inputFile2").change(function(){
			self.uploadImg2();
		})
	}
})
